<!DOCTYPE html>
<html>
<head>
    <title>Physics Collision Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow from (fromX, fromY) to (toX, toY)
        function drawArrow(ctx, fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Define parameters
        const cx = 250; // pivot x
        const cy = 80;  // pivot y
        const rodLength = 180;
        const ballRadius = 11;
        const angleDeg = 30;
        const angleRad = angleDeg * Math.PI / 180;

        // Set global styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px Arial';

        // 1. Draw Pivot 'O'
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('O', cx - 20, cy + 5);

        // 2. Draw the Rod in its final position
        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(angleRad);
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(0, rodLength);
        ctx.stroke();
        ctx.restore();

        // 3. Draw the vertical dashed line (equilibrium position)
        ctx.lineWidth = 1.5;
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx, cy + rodLength + 20);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 4. Draw the angle arc and label
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(cx, cy, 40, Math.PI / 2, Math.PI / 2 + angleRad);
        ctx.stroke();
        ctx.font = '18px Times New Roman';
        ctx.fillText('30°', cx + 28, cy + 45);
        ctx.lineWidth = 2;


        // 5. Draw the incoming ball and momentum vector
        const ballInitialX = cx - 160;
        const ballY = cy + rodLength;
        ctx.beginPath();
        ctx.arc(ballInitialX, ballY, ballRadius, 0, 2 * Math.PI);
        ctx.fillStyle = '#666';
        ctx.fill();
        ctx.strokeStyle = 'black'; // Redraw border
        ctx.stroke();

        drawArrow(ctx, ballInitialX + 20, ballY, ballInitialX + 100, ballY);
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.fillText('mv', ballInitialX - 75, ballY + 7);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('0', ballInitialX - 52, ballY + 12);
        
        // 6. Draw the ball at the collision point
        ctx.beginPath();
        ctx.arc(cx, ballY, ballRadius, 0, 2 * Math.PI);
        ctx.fillStyle = '#888';
        ctx.fill();
        ctx.stroke();

        // 7. Draw velocity 'v' and angular velocity 'ω' symbols
        const vArrowY = ballY + 25;
        drawArrow(ctx, cx, vArrowY, cx + 70, vArrowY);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('v', cx + 30, vArrowY + 25);

        // Draw the curved arrow for ω
        const omegaCurve = {
            x1: cx - 45, y1: vArrowY + 30,
            cpx: cx + 25, cpy: vArrowY - 15,
            x2: cx + 95, y2: vArrowY + 30
        };
        ctx.beginPath();
        ctx.moveTo(omegaCurve.x1, omegaCurve.y1);
        ctx.quadraticCurveTo(omegaCurve.cpx, omegaCurve.cpy, omegaCurve.x2, omegaCurve.y2);
        ctx.stroke();

        // Add the two arrowheads to the omega curve to match the image
        // Left arrowhead (pointing up-right)
        ctx.beginPath();
        ctx.moveTo(omegaCurve.x1 + 10, omegaCurve.y1 - 6);
        ctx.lineTo(omegaCurve.x1, omegaCurve.y1);
        ctx.lineTo(omegaCurve.x1 + 2, omegaCurve.y1 + 10);
        ctx.stroke();

        // Right arrowhead (pointing down-right)
        ctx.beginPath();
        ctx.moveTo(omegaCurve.x2 - 10, omegaCurve.y2 - 6);
        ctx.lineTo(omegaCurve.x2, omegaCurve.y2);
        ctx.lineTo(omegaCurve.x2 - 2, omegaCurve.y2 + 10);
        ctx.stroke();

        ctx.fillText('ω', omegaCurve.cpx, vArrowY + 20);


        // 8. Draw the problem figure label
        ctx.font = '20px "SimSun", "STSong"';
        ctx.fillText('题 8 图', canvas.width / 2 - 40, canvas.height - 20);

    </script>
</body>
</html>